<template>
  <div class='tabs-view-container'>
    <el-tabs v-model="iframeActive" type="card"
      size="small"
      @tab-click="linkTab"
      closable @tab-remove="closeViewTabs"
     >
      <el-tab-pane
        :key="item.path"
        v-for="(item, index) in visitedViews"
        :label="item.name"
        :name="item.path"
      >{{item.id}}
      </el-tab-pane>
    </el-tabs>
    <!-- <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
      <el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>
        {{tag.name}}
      </el-tag>
    </router-link> -->
  </div>
</template>

<script>
export default {
  data(){
    return{
      // menuActive:this.iframeActive||this.$route.path
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.app.visitedViews
    },
    iframeActive(){
      return this.$store.state.app.iframeActive||this.$route.path
    },
    iframeArray() {
      return this.$store.state.app.iframeArray
    },
  },
  methods: {
    linkTab(targetName){
      console.log(targetName.name)
      if(targetName.name.indexOf('iframe')>-1){
         this.$store.dispatch('toggleIframe',{"name":targetName.label,"path":targetName.name});
      }else{
        this.$store.dispatch('toggleIframe');
        this.$store.dispatch('getOperation',targetName.name)
        if(!window.location.href.indexOf(targetName.name)>-1){
         

          this.$router.push({path:targetName.name,query:{'viewType':'tab'}})
        }
      }
      
    },
    closeViewTabs(targetName) {
      if(this.visitedViews.length==1){
        return
      }
      console.log(targetName)
      // this.$store.dispatch('toggleIframe',true);
      this.$store.dispatch('delVisitedViews', targetName).then((views) => {
        if (this.isActive(targetName)||this.iframeActive) {
          const latestView = views.slice(-1)[0],
              isIframe=latestView.path.indexOf("iframe")>-1;
          console.log(latestView)
          if (latestView&&!isIframe) {
            this.$router.push(latestView.path)
             this.$store.dispatch('toggleIframe');
          }else if(isIframe){
            this.iframeArray.map(item=>{
              if(item.path==latestView.path){
                this.$store.dispatch('toggleIframe',item);
              }
            })
          } else {
            this.$router.push('/map')
          }
        }
      })
      // $event.preventDefault()
    },
    generateRoute() {
      if (this.$route.path) {
        return this.$route
      }
      this.$route.matched[0].path = '/'
      return this.$route.matched[0]
    },
    addViewTabs() {
      this.$store.dispatch('addVisitedViews', this.generateRoute())
    },
    isActive(path) {
      return path === this.$route.path
    }
  },
  watch: {
    $route() {
      console.log(this.$route)
      this.addViewTabs()
    }
  },
  mounted(){
    this.addViewTabs()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tabs-view-container {
    vertical-align: top;
    .el-tabs__header{margin-bottom:0}
    .tabs-view {
      
    }
  }
</style>
